import React, { useCallback } from 'react';
import { Box, SimpleAccordion, Text } from '@nova-hf/ui';
import { PillProps } from '@nova-hf/ui/umd/ts/src/pill/Pill';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import ServiceContractDisplay from 'beta/containers/service-contractDisplay/ServiceContractDisplay';
import {
  ContractStatus,
  Port,
  RestrictionLiftStatus,
  RestrictionStatus,
  ServiceStatus,
  useCpeStatusQuery,
  useFiberRoutersQuery,
  useRestrictionsQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { SectionHeader } from '../../comoponents/SectionHeader';

import { FiberBoxContent } from './FiberBoxContent';
import { GetHelpButtons } from './GetHelpButtons';
import { RouterInfo } from './RouterInfo';

type FiberStatusProps = {
  serviceId: string;
  color: MainColorType;
  statusCode: ContractStatus;
  serviceStatus: ServiceStatus;
  hasDefaults?: boolean;
};

export const FiberStatus = ({
  serviceId,
  color,
  statusCode,
  serviceStatus,
  hasDefaults,
}: FiberStatusProps) => {
  const { data: routerData, loading: routerLoading } = useFiberRoutersQuery({
    variables: { id: serviceId },
    skip: statusCode !== ContractStatus.Active,
  });

  const { data: fiberBoxData, loading: fiberBoxLoading } = useCpeStatusQuery({
    variables: { id: serviceId },
    skip: statusCode !== ContractStatus.Active,
  });

  const { data: restrictionsData } = useRestrictionsQuery({
    variables: { serviceId: serviceId?.toString() },
    skip: serviceStatus !== ServiceStatus.Restricted,
  });
  const restrictions = restrictionsData?.restrictions;
  const firstUnresolvedRestriction = restrictions?.find(
    (restriction) => restriction?.restrictionStatus === RestrictionStatus.Active,
  );
  const firstHasActiveLift = firstUnresolvedRestriction?.temporaryRestrictionLifts?.find(
    (lift) => lift?.status === RestrictionLiftStatus.Active,
  );
  const { t } = useTranslation('fiber');

  const fiberBox = fiberBoxData?.cpeStatus;
  const ports = fiberBoxData?.cpeStatus?.ports;

  const inactiveStatuses = [
    ContractStatus.Unpaid,
    ContractStatus.Unknown,
    ContractStatus.Cancelled,
    ContractStatus.Canceled,
    ContractStatus.Abandoned,
  ];

  const profileStatusMap = useCallback((): PillProps => {
    if (!statusCode) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.noProfile'),
        color: 'attention',
      };
    }
    if (statusCode === ContractStatus.Pending) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.signup'),
        color: 'grey300',
      };
    }
    if (inactiveStatuses.includes(statusCode)) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.inactive'),
        color: 'warning',
      };
    }
    if (statusCode === ContractStatus.Restricted) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.restricted'),
        color: 'attention',
      };
    }
    if (statusCode === ContractStatus.Active && hasDefaults) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.unpaid'),
        color: 'warning',
      };
    }
    if (statusCode === ContractStatus.Active && !hasDefaults) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.active'),
        color: 'success',
      };
    } else {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.profile.pill.notOK'),
        color: 'warning',
      };
    }
  }, [statusCode]);

  const fiberStatusMap = useCallback((): PillProps => {
    if (fiberBoxLoading) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.loading'),
        color: 'grey300',
      };
    }
    if (!fiberBox) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.noFiber'),
        color: 'grey300',
      };
    }
    if (serviceStatus === ServiceStatus.Restricted && !firstHasActiveLift) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.restricted'),
        color: 'attention',
      };
    }
    if (serviceStatus === ServiceStatus.Restricted && firstHasActiveLift) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.lifted'),
        color: 'attention',
      };
    }
    if (fiberBox?.isBoxActive) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.active'),
        color: 'success',
      };
    } else {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.fiber.pill.notOK'),
        color: 'warning',
      };
    }
  }, [fiberBoxLoading, fiberBox, serviceStatus]);

  const routerStatusMap = (): PillProps => {
    if (routerLoading) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.router.pill.loading'),
        color: 'grey300',
      };
    }
    if (!routerData?.fiberRouters) {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.router.pill.noConnectedRouter'),
        color: 'grey300',
      };
    }
    if (routerData?.fiberRouters?.length > 0) {
      return {
        maxWidth: 25,
        text: ` ${t('fiberStatus.stepAccordion.router.pill.active')}`,
        color: 'success',
      };
    } else {
      return {
        maxWidth: 25,
        text: t('fiberStatus.stepAccordion.router.pill.notOK'),
        color: 'warning',
      };
    }
  };

  return (
    <Box display="flex" flexDirection="column" gap={3}>
      <SectionHeader headerTitle={t('services:subTitles.fiber')} />
      <SimpleAccordion
        color={color}
        title={t('fiberStatus.stepAccordion.profile.title')}
        icon="novaLogo"
        hasBoxShadow
        pill={{ ...profileStatusMap() }}
      >
        <ServiceContractDisplay color={color} serviceId={serviceId.toString()} />
      </SimpleAccordion>
      <SimpleAccordion
        title={t('fiberStatus.stepAccordion.fiber.title')}
        color={color}
        icon="fourG"
        hasBoxShadow
        pill={{ ...fiberStatusMap() }}
      >
        {fiberBox ? (
          <>
            <FiberBoxContent
              ports={ports ? (ports as Array<Port>) : undefined}
              isBoxActive={fiberBox?.isBoxActive || false}
              isLoading={fiberBoxLoading}
              uptime={fiberBox?.uptime || ''}
              color={color}
            />
          </>
        ) : fiberBoxLoading ? (
          <Box paddingX={9} marginBottom={4}>
            {t('fiberStatus.fiberBoxLoading')}
          </Box>
        ) : (
          <Box paddingX={9}>
            <Text>{t('fiberStatus.fiberBoxNotFound')}</Text>
            <Box marginBottom={3}>
              <GetHelpButtons
                color={color}
                href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
              />
            </Box>
          </Box>
        )}
      </SimpleAccordion>
      <SimpleAccordion
        title={t('fiberStatus.stepAccordion.router.title')}
        icon="wifi"
        color={color}
        hasBoxShadow
        isLastItem={true}
        pill={{ ...routerStatusMap() }}
      >
        {routerData?.fiberRouters && routerData?.fiberRouters.length ? (
          <RouterInfo color={color} routers={routerData?.fiberRouters} isLoading={routerLoading} />
        ) : routerLoading ? (
          <Box marginBottom={4} paddingX={9}>
            {t('fiberStatus.routerLoading')}
          </Box>
        ) : (
          <Box paddingX={9}>
            <Text>{t('betaAccordion.routerNotNovaOrNotFound')}</Text>
            <Box marginBottom={4}>
              <GetHelpButtons
                color={color}
                href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
              />
            </Box>
          </Box>
        )}
      </SimpleAccordion>
    </Box>
  );
};